<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#d1").click(function () {
                $(this).animate({"left": "1800px", "width": "130px", "height": "130px"}, 1000)
                    .animate({"left": "900px", "top": "800px", "width": "100px", "height": "100px"}, 1000)
                    .animate({"left": "0px", "top": "0px"}, 1000);
                // 所有事件处理中,如果传递参数fn表示当触发指定事件之后所执行的处理
                // 如果不传递参数,表示触发指定事件
                // 通过代码实现点击指定元素的效果
                $(this).click();
            });
        });
    </script>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;background-color: red;position: relative;left: 0px;top: 0px;"></div>
</body>
</html>